
<template>
  <!-- 收入调整事项 -->
  <div class="content-page">
   
    <div>
      <el-form size="small" v-model="curform" label-width="120px" label-position="left">
        <el-row>
          <!-- <el-col :span="8">
            <el-form-item label="调整影响">
              <el-select clearable v-model="curform.adjustTheImpact" placeholder="请选择调整影响">
                <el-option v-for="(item, index) in adjustTheImpact" :key="index" :label="item.name" :value="item.id"></el-option>
              </el-select>
            </el-form-item>
          </el-col> -->
          <!-- <el-col :span="8">
            <el-form-item label="资产类型">
              <el-select clearable v-model="curform.assetTypes" placeholder="请选择资产类型">
                <el-option v-for="(item, index) in assetTypes" :key="index" :label="item.name" :value="item.id"></el-option>
              </el-select>
            </el-form-item>
          </el-col> -->
          <el-col :span="8">
            <el-form-item label="资产编码">
              <el-input v-model="curform.assetsEncoding" clearable placeholder="请输入资产编码"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <div style="text-align: right; padding-bottom: 30px">
          <el-button type="primary" round @click="screening">筛选</el-button>
        </div>
      </el-form>
    </div>

    <div class="padding-top-15 padding-bottom-15 align-center">
      <div class="font-size-16 font-weight-700">本次待审核</div>
      <div class="margin-left-30">
        共调整{{ toAuditObj.total }}个事项，调整总金额：<span>{{ toAuditObj.adjustAmount > 0 ? '增加' : '减少' }}</span
        >{{ toAuditObj.adjustAmount | moneyFilter }}元，调整比例：{{ toAuditObj.adjustProportion }}
      </div>
    </div>
    <el-row>
      <el-table :data="toAudit" border style="width: 100%" :header-cell-style="{ background: '#f8f8f8' }">
        <el-table-column
          v-for="(item, index) in planRevenueChangeTitle"
          :key="index"
          :prop="item.prop"
          :label="item.label"
          header-align="center"
          :width="item.width ? item.width : null"
          :align="item.align ? item.align : null"
          :fixed="item.fixed ? item.fixed : null">
          <template slot-scope="scope">
            <!-- 资产类型↑ -->
            <div v-if="item.prop === 'itemTypeName'">{{ scope.row.itemTypeName }}</div>
            <div v-if="item.prop === 'itemName'">{{ scope.row.itemName }}</div>
            <div v-if="item.prop === 'adjustNum'">{{ scope.row.adjustNum }}</div>
            <div v-if="item.prop === 'adjustContent'" @click="openPopup(scope.row)" class="pointer">{{ scope.row.adjustContent }}</div>
            <div v-if="item.prop === 'adjustAmount'">
              <span>{{ scope.row.adjustAmount > 0 ? '增加' : '减少' }}</span>
              <span>{{ scope.row.adjustAmount | moneyFilter }}元</span>
            </div>
            <div v-if="item.prop === 'adjustImpact'">
              <span>{{ scope.row.adjustImpact > 0 ? '全年收入增加' : '全年收入减少' }}</span>
              <span>{{ scope.row.adjustImpact * 100 | percentageFilter }}</span>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </el-row>
    <div style="text-align: center; margin-top: 20px; display: flex; justify-content: flex-end">
      <el-pagination background layout="total, prev, pager, next" :total="toAuditQueryParams.total" :current-page.sync="toAuditQueryParams.currentPage" :page-size="toAuditQueryParams.pageSize" @current-change="toAuditCurrentchange"> </el-pagination>
    </div>

    <div class="padding-top-15 padding-bottom-15 align-center">
      <div class="font-size-16 font-weight-700">已审核</div>
      <div class="margin-left-30">
        共调整{{ theApprovedObj.total }}个事项，调整总金额：<span>{{ theApprovedObj.adjustAmount > 0 ? '增加' : '减少' }}</span
        >{{ theApprovedObj.adjustAmount | moneyFilter }}元，调整比例：{{ theApprovedObj.adjustProportion }}
      </div>
    </div>
    <el-row>
      <el-table :data="theApproved" border style="width: 100%" :header-cell-style="{ background: '#f8f8f8' }">
        <el-table-column
          v-for="(item, index) in planRevenueChangeTitle"
          :key="index"
          :prop="item.prop"
          :label="item.label"
          header-align="center"
          :width="item.width ? item.width : null"
          :align="item.align ? item.align : null"
          :fixed="item.fixed ? item.fixed : null">
          <template slot-scope="scope">
            <!-- 资产类型↑ -->
            <div v-if="item.prop === 'itemTypeName'">{{ scope.row.itemTypeName }}</div>
            <div v-if="item.prop === 'itemName'">{{ scope.row.itemName }}</div>
            <div v-if="item.prop === 'adjustNum'">{{ scope.row.adjustNum }}</div>
            <div v-if="item.prop === 'adjustContent'" @click="openPopup(scope.row)" class="pointer">{{ scope.row.adjustContent }}</div>
            <div v-if="item.prop === 'adjustAmount'">
              <span>{{ scope.row.adjustAmount > 0 ? '增加' : '减少' }}</span>
              <span>{{ scope.row.adjustAmount | moneyFilter }}元</span>
            </div>
            <div v-if="item.prop === 'adjustImpact'">
              <span>{{ scope.row.adjustImpact > 0 ? '全年收入增加' : '全年收入减少' }}</span>
              <span>{{ scope.row.adjustImpact * 100 | percentageFilter }}</span>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </el-row>
    <div style="text-align: center; margin-top: 20px; display: flex; justify-content: flex-end">
      <el-pagination background layout="total, prev, pager, next" :total="theApprovedQueryParams.total" :current-page.sync="theApprovedQueryParams.currentPage" :page-size="theApprovedQueryParams.pageSize" @current-change="theApprovedCurrentchange"> </el-pagination>
    </div>
    <AdjustInformation ref="dialogTable" :tableData.sync="dialogData" :dialogTitle.sync="dialogTitle" :show-further="showFurther" :statusList="statusList" @close-dialog="closeFurther"></AdjustInformation>
  </div>
</template>

<script>
import AdjustInformation from './components/adjustInformation.vue';
import Api from '../../api/incomeAndExpenditurePlan';
import dayjs from 'dayjs';
export default {
  name: 'planRevenueChange',
  data() {
    return {
      curform: {
        adjustTheImpact: null, //调整影响
        assetTypes: null, //资产类型
        assetsEncoding: null, //资产编码
      },
      adjustTheImpact: [],
      assetTypes: [],
      toAudit: [],
      toAuditObj: {
        adjustAmount: null,
        adjustProportion: null,
        total: null,
      },
      theApproved: [],
      theApprovedObj: {
        adjustAmount: null,
        adjustProportion: null,
        total: null,
      },
      toAuditQueryParams: {
        total: 0,
        currentPage: 1,
        pageSize: 5,
      },
      theApprovedQueryParams: {
        total: 0,
        currentPage: 1,
        pageSize: 5,
      },
      showFurther: false, // 调整信息弹窗
      statusList: 1,
      dialogData: [], //弹框数据
      dialogTitle: null,
    };
  },
  mounted() {
    this.getList(1);
    this.getList(2);
  },
  methods: {
    async getList(status = 1, adjustImpact = null, itemCode = null, currentPage = 1, pageSize = 5) {
      // this.$route.query.processWorkId || 
      let planKey = this.$route.query.planKey;
      // this.$route.query.processWorkId ? 'processIncomeSpendingAdjustTheMatters' : 
      Api['incomeSpendingAdjustTheMatters']({
        status, //1已审核，2待审核
        type: '1', // 1收入，2支出
        planKey: status === 2 ? planKey : null, //计划key
        adjustImpact: adjustImpact, //调整影响
        itemCode, //资产类型
        currentPage,
        pageSize,
        year: this.$route.query.year,
      }).then(res => {
        if (res && res.success) {
          if (status === 1) {
            this.theApproved = res.rows;
            this.theApprovedObj.adjustAmount = res.adjustAmount;
            this.theApprovedObj.adjustProportion = res.adjustProportion;
            this.theApprovedObj.total = res.total;
            this.theApprovedQueryParams.total = res.total;
          } else {
            this.toAudit = res.rows;
            this.toAuditObj.adjustAmount = res.adjustAmount;
            this.toAuditObj.adjustProportion = res.adjustProportion;
            this.toAuditObj.total = res.total;
            this.toAuditQueryParams.total = res.total;
          }
        }
      });
    },
    //筛选
    screening() {
      this.getList(1, this.curform.adjustTheImpact, this.curform.assetsEncoding, 1, 5);
      this.getList(2, this.curform.adjustTheImpact, this.curform.assetsEncoding, 1, 5);
    },
    //修改页
    currentChange(val) {},
    //调整信息弹出层
    adjustInformation() {},

    // 调整信息 - 弹窗关闭
    closeFurther(val) {
      this.showFurther = val;
    },
    // 调整信息 - 打开弹窗
    async openPopup(row) {
      // this.$route.query.processWorkId || 
      let planKey = this.$route.query.planKey;
      // this.$route.query.processWorkId ? 'processIncomeSpendingAdjustTheMatters' : 
      Api['incomeSpendingAdjustTheMatters']({
        status: row.status, //1已审核，2待审核
        type: '1', // 1收入，2支出
        planKey: row.status === 2 ? planKey : null, //计划key
        itemCode: row.itemCode, //资产类型
        year: this.$route.query.year,
      }).then(res => {
        if (res && res.success) {
          res.rows.forEach(item => {
            item.adjustDate = dayjs(item.adjustDate).format('YYYY-MM-DD HH:mm');
          });
          this.dialogData = res.rows;
          this.statusList = row.status;
          // this.dialogTitle = this.assetTypesFilter(row.itemCode) + row.itemName;
          this.dialogTitle = row.itemTypeName + '--' + row.itemName;
          this.showFurther = true;
        }
      });
    },
    assetTypesFilter(num) {
      if (num == 1) {
        return '商铺';
      } else if (num == 2) {
        return '空间信息';
      } else if (num == 3) {
        return '写字楼信息';
      } else if (num == 4) {
        return '其他';
      } else if (num == 5) {
        return '广告';
      } else if (num == 6) {
        return '停车场信息';
      } else if (num == 7) {
        return '活动';
      } else if (num == 8) {
        return '设备';
      } else if (num == 9) {
        return '其他收入';
      } else if (num == 10) {
        return '能源收入';
      }
    },
    //待审批分页
    toAuditCurrentchange(page) {
      this.toAuditQueryParams.currentPage = page;
      this.getList(2, this.curform.adjustTheImpact, this.curform.assetsEncoding, this.toAuditQueryParams.currentPage, this.toAuditQueryParams.pageSize);
    },
    //已审批
    theApprovedCurrentchange(page) {
      this.theApprovedQueryParams.currentPage = page;
      this.getList(1, this.curform.adjustTheImpact, this.curform.assetsEncoding, this.theApprovedQueryParams.currentPage, this.theApprovedQueryParams.pageSize);
    },
    // header上的提交
    submitTableCopy() {
      let planKey = this.$route.query.planKey ? this.$route.query.planKey : '';
      Api.submitTableCopy({ primaryKey: planKey }).then(res => {
        if (res.success) {
          this.getList(1);
          this.getList(2);
        }
      });
    },
  },
  filters: {
    moneyFilter(money) {
      if (money && money !== null) {
        let m = parseInt(money) + '';
        var left = m.split('.')[0],
          right = m.split('.')[1];
        right = right ? (right.length >= 2 ? '.' + right.substr(0, 2) : '.' + right + '0') : '.00';
        var temp = left
          .split('')
          .reverse()
          .join('')
          .match(/(\d{1,3})/g);
        return '¥' + temp.join(',').split('').reverse().join('') + right;
      } else if (money == 0) {
        return '00.0';
      } else {
        return '';
      }
    },

    percentageFilter(num) {
      return Math.abs(num) + '%';
    },
  },
  components: { AdjustInformation },
  computed: {
    //表头
    planRevenueChangeTitle() {
      let align = 'center';
      let width = false;
      let planRevenueChangeArr = [
        {
          prop: 'itemTypeName',
          label: '资产类型',
          width: '150px',
          align,
        },
        {
          prop: 'itemName',
          label: '资产',
          width: '150px',
          align,
        },
        {
          prop: 'adjustNum',
          label: '本年度调整次数',
          width: '150px',
          align,
        },
        {
          prop: 'adjustContent',
          label: '调整内容',
          width,
          align,
        },
        {
          prop: 'adjustAmount',
          label: '调整金额',
          width: '220px',
          align,
        },
        {
          prop: 'adjustImpact',
          label: '调整影响',
          width: '220px',
          align,
        },
      ];
      return planRevenueChangeArr;
    },
  },
};
</script>
<style lang='scss' scoped>
.btn-submit {
  position: fixed;
  top: 14px;
  right: 310px;
  z-index: 9999;
}
</style>